<!DESCRIPTION> This is an alternate version of our AnyLink Drop Down Menu that works with vertical links instead. The menu is positioned to the right of the link, and works with most types of links, whether it's a regular text link, image link, or even a table cell or list that happens to contain a link. Furthermore, this script detects the four corners of the browser window and readjusts the menu so it's always in view.
The script works in all the major DHTML browsers- IE4+, NS6+, and Opera7+. You can specify a valid default URL for each link for other browsers to navigate to. Cool!
<!/DESCRIPTION>
<!CATEGORY>drop down menus<!/CATEGORY>
<!SCRIPT>
<!-- START OF SCRIPT -->
<!-- Step 1: Insert the following style sheet and script into the <head> section of your page: -->
<style type="text/css">
#dropmenudiv{
position:absolute;
background-color: #E3FFB0;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}
#dropmenudiv a:hover{ /*hover background color*/
background-color: #C7FF5E;
}
/* Sample CSS definition for the example list. Remove if desired */
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}
function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}
function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
</script>
<!-- Step 2: Having done the above, all that's left is setting up your link(s) so a menu drops down. The below sample HTML demonstrates setting up the menu on either a regular text link or a list element (<li>): -->
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}
function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}
function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
</script>
<!-- Step 2: Having done the above, all that's left is setting up your link(s) so a menu drops down. The below sample HTML demonstrates setting up the menu on either a regular text link or a list element (<li>): -->
